<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>助力好友 达成心愿</title>
    <link rel="stylesheet" href="../themes/mall/default/styles/share/css/hui.css">
    <link rel="stylesheet" href="../themes/mall/default/styles/share/css/style.css">
    <script src="/mobile/themes/mall/default/styles/share/js/com.js"></script>
    <script src="/mobile/themes/mall/default/styles/share/js/hui.js"></script>
    <script src="/mobile/themes/mall/default/styles/share/js/template-web.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
        .clear:after{clear: both;content:'';display: block;}
        .fl{float: left;}
        .fr{float: right;}

        .progressp{padding: 20px;margin-top: -40px;}
        .progressp .tip{padding: 4px 40px;font-size: 14px;margin-left: auto;display: inline-block;border-radius: 50px;margin-bottom: 10px;}

        .progress .zuo{height: 8px;width: 100%;background: #ccc;border-radius: 4px;}
        .progress .selectstyle{background: #AF324B;height: 8px;border-radius: 4px;}
        .progress .selectstyle{background: #FFDE0C;height: 8px;border-radius: 4px;}

        #youzhi{position: relative;}
        #youzhi:after{content:'';display: block;width: 8px;height: 8px;background: #fff;border:1px solid #666;box-shadow: 0 0 4px #666;position: absolute;right: 0;top: -1px;border-radius: 50%;}
    </style>
</head>
<body>
<div style="background: url(/mobile/themes/mall/default/styles/share/img/back18.png) no-repeat center center;background-size: cover" class="w100per h100per" id="bgcontain">
    <div style="padding: 12px 0 0 18px">
    </div>

    <div id="contain"></div>
</div>

<style type="text/css">
    #tank{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.5);z-index: 10;display: none}
    #tank .nr{position: absolute;width: 300px;height: 270px;left: 50%;margin-left: -150px;margin-top: -135px;background: linear-gradient(#DD8185,#DD4C79);top: 50%;border-radius: 16px}
    #tank .nr .tit{font-size: 20px;text-align: center;color:#fff;padding-top: 60px}
    #tank .nr .btn{color:#fff;text-align:center;width: 70%;height: 44px;line-height: 44px;margin-left: 15%;margin-top: 60px;background: linear-gradient(#DFCB70,#DDBA5D);border-radius: 50px}
    #tank .nr .desc{color:#fff;text-align:center;line-height: 20px;margin-top: 20px;font-size: 12px}
</style>
<div id="tank">
    <div class="nr">
        <input type="hidden" id="code" value="{$info.code}">
        <div class="tit copy">邀请码：{$info.code}</div>
        <div class="btn copy">下载APP</div>
        <div class="desc">
            请先下载APP,注册并粘贴此邀请码<br>
            此邀请码为{$info.code},完成后帮好友助力。
        </div>
    </div>
</div>

<script type="text/html" id="tpl">
    <div class="fs14 c333 txt_center" style="">
    </div>
    <div class="pad_l10 pad_r10 pad_b16">
        <div class="bdr8 pad_l10 pad_r10 bgcfff bd_allred" style="height: 640px;">
            <div class="bd_b" style="padding: 14px 0;line-height: 28px; height:auto;">
                <div >
                    <div style="width: 100%;height: 240px;padding-top: 93px;">
                        <img style="width:100px;height: 73px;margin-left: 25px;margin-top: -63px;" src="../{$info.goodsSpecInfo.spec_1}" alt="">
                        <div style="position: absolute;float: right;margin: -70px 28px 0 150px;">
                            <font style="width:322px;height:90px;font-size:13px;font-family:PingFang SC;font-weight:400;line-height:1px;
color:rgba(0,0,0,1);">{$info.goodsInfo.goods_name}</font>
                        </div>
                        <div style="position: absolute;float: right;margin: -30px -38px 0 150px;">
                            <font style="width:385px;height:37px;font-size:14px;font-family:PingFang SC;font-weight:400;line-height:36px;color:rgba(153,153,153,1);opacity:1;">{$info.goodsSpecInfo.spec_1value} {$info.goodsSpecInfo.spec_2}</font>
                        </div>
                        <div style="position: absolute;float: right;margin: -7px -38px 0 150px;">
                            <font style="width:385px;height:37px;font-size:14px;font-family:PingFang SC;font-weight:400;line-height:36px;color:rgba(153,153,153,1);opacity:1;">商品售价：￥{$info.info.goods_price}</font>
                        </div>

                        <hr style="position: absolute;margin-top:80px;margin-left: 20px; width:80%;height:0px;border:1px dashed rgba(251,203,210,1);"/>

                    </div>
                    <!--<hr style="float:left;width:20%;border:4px solid #ef4f4f;border-radius:8px;margin-top: 46px;margin-left: 55px;"/>-->
                    <!--<hr style="float:left;width:50%;border:4px solid #ef4f4f;border-radius:8px;margin-top: 46px;"/>-->

                    <div class="progressp">
                        <div class="clear">
                            <div class="tip" style="margin: 0 auto;padding-left: 65px;position: relative;">
                                <span style="font-size: 16px;">距离达成心愿还差</span>
                                <span style="font-size: 16px; color: red">{$info.protion}</span>
                            </div>
                        </div>
                        <div class="clear progress">
                            <div class="fl zuo">
                                <div id="zuozhi" class="selectstyle" style="width:{$info.cha}"></div>
                                <!--<img  style="width: 45px;height: 45px;" src="/mobile/themes/mall/default/styles/share/img/roabit.png" alt="">-->
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;">
                    <div id="help_div" style="position:relative;max-width:60%;margin:0 auto;" class="show">
                        <p id="help_p" style="text-align:center;position:absolute;font-size:1.3em;font-family:PingFang SC;font-weight:400;
line-height:42px;
color:rgba(255,255,255,1)">助力好友心想事成</p>
                        <img id="help_img" src="/mobile/themes/mall/default/styles/share/img/biao.png" style="width:100%;height:auto;display:block;margin:0 auto;">

                        <!--{if $info['info']['state'] eq 1}-->
                            <div style="margin-left: 24px;">
                                <font style="width:385px;height:37px;font-size:14px;font-family:PingFang SC;font-weight:400;line-height:36px;color:rgba(153,153,153,1);opacity:1;">剩余</font>
                                <span id="tian" style="width:40px;height:40px;border:1px solid rgba(192,192,192,1);opacity:1;border-radius:3px;color:rgba(198,37,43,1);font-size: 12px;">
                                    60
                                </span>
                                <span style="width:40px;height:40px;color:rgba(198,37,43,1);font-size: 12px;">
                                    天
                                </span>
                                <span id="shi" style="width:40px;height:40px;border:1px solid rgba(192,192,192,1);opacity:1;border-radius:3px;color:rgba(198,37,43,1);font-size: 12px;">
                                    00
                                </span>
                                <span style="width:40px;height:40px;color:rgba(198,37,43,1);font-size: 12px;">
                                    :
                                </span>
                                <span id="fen" style="width:40px;height:40px;border:1px solid rgba(192,192,192,1);opacity:1;border-radius:3px;color:rgba(198,37,43,1);font-size: 12px;">
                                    59
                                </span>
                                <span style="width:40px;height:40px;color:rgba(198,37,43,1);font-size: 12px;">
                                    :
                                </span>
                                <span id="miao" style="width:40px;height:40px;border:1px solid rgba(192,192,192,1);opacity:1;border-radius:3px;color:rgba(198,37,43,1);font-size: 12px;">
                                   59
                                </span>
                            </div>
                       <!--{/if}-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script>

    var wish_close = true;
    //倒计时 start
    var endtime=new Date("{$end_time}");//截止时间
    var timer=setInterval(function(){
        var currtime=new Date();
        var shijiancha=parseInt(endtime-currtime)/1000;
        if(shijiancha>0){
            var days = Math.floor(shijiancha / (60 * 60 * 24));//天数
            var modulo = shijiancha % (60 * 60 * 24);//取模（余数）
            var hours = Math.floor(modulo / (60 * 60));//小时数
            modulo = modulo % (60 * 60);
            var minutes = Math.floor(modulo / 60);//分钟
            var seconds = Math.floor(modulo % 60);//秒
            $('#tian').html(one2two(days));
            $('#shi').html(one2two(hours));
            $('#fen').html(one2two(minutes));
            $('#miao').html(one2two(seconds));
        }else{
            wish_close = false;
            clearInterval(timer);
            $('#tian').html('0');
            $('#shi').html('00');
            $('#fen').html('00');
            $('#miao').html('00');
            timer=null;
        }
    },1000);
    function one2two(num){
        return num<10?'0'+num:num;
    }
    //倒计时 end

    $(function () {

        //复制功能
        var copyBtn = document.querySelector('.copy');
        var html = '@'+$("#code").val()+'@';


        $(".show").click(function(){
            if(!wish_close){
                alert('很遗憾，心愿单时间已过，您不能再助力！');
                return false;
            }else{
                $("#tank").css("display","block");
            }
        })
        $(".btn").click(function(){
            var u = navigator.userAgent;
            var ua = u.toLowerCase();

            // copyTextToClipboard(html)
            copytext(html)


            if (/iphone|ipad|ipod/.test(ua)) {  // iOS 系统 ->  跳AppStore下载地址
                window.location.href = 'https://apps.apple.com/cn/app/%E4%BA%91%E5%B0%9A%E5%A5%A5%E8%8E%B1/id1465194574';
            } else if ( /android/.test(ua)) { // 安卓系统 -> 跳安卓端下载地址
                window.location.href = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.yunshang.ecmall';
            } else if (IsPC()){ // PC端

            }
        })
        // 页面加载完毕获取图片的宽度和高度
        $(window).load(function () {
            let w = $('#help_img').width();
            let h = $('#help_img').height();

            $('#help_p').css({
                "width": w + 'px',
                "height": w + 'px',
                "line-height": h + 'px',
                'left': 0,
            });
        });


        // //复制功能
        // var copyBtn = document.querySelector('.copy');
        // var html = '@'+$("#code").val()+'@';

        // 点击的时候调用 copyTextToClipboard() 方法就好了.
        copyBtn.onclick = function() {
            // copyTextToClipboard(html)
            copytext(html)
            return false;
        }
        function copytext(html) {
            var oInput = document.createElement('input');
            oInput.value = html;
            document.body.appendChild(oInput);
            // oInput.select();
            selectText(oInput)
            document.execCommand("Copy");
            oInput.className = 'oInput';
            oInput.style.display = 'none';
            alert('复制成功！');
        }
        function selectText(oInput) {
            if(oInput.createTextRange) {//ie
                oInput.select();
            }else{//firefox/chrome
                oInput.setSelectionRange(0, oInput.value.length);
                oInput.focus();
            }
        }

        // function copyTextToClipboard(text) {
        //     var textArea = document.createElement("textarea")
        //
        //     textArea.style.position = 'fixed'
        //     textArea.style.top = 0
        //     textArea.style.left = 0
        //     textArea.style.width = '2em'
        //     textArea.style.height = '2em'
        //     textArea.style.padding = 0
        //     textArea.style.border = 'none'
        //     textArea.style.outline = 'none'
        //     textArea.style.boxShadow = 'none'
        //     textArea.style.background = 'transparent'
        //     textArea.value = text
        //
        //     document.body.appendChild(textArea)
        //
        //     textArea.select()
        //
        //     try {
        //         var msg = document.execCommand('copy') ? '成功' : '失败'
        //         alert('复制邀请码' + msg);
        //     } catch (err) {
        //         alert('不能使用这种方法复制内容');
        //     }
        //
        //     document.body.removeChild(textArea)
        // }

        $("#tank").click(function(){
            $(this).css('display','none');
        })

    });


    var canajax=true;

    // if(!Getvariable('token') || !Getvariable('goods_id')){
    // 	hui.toast('少token参数/goods_id参数');
    // }else {
    //     pre_loading_txt(0);
    // }

    var data={
        tel:'',
        code:''
    };
    function renderhtml(){
        document.getElementById('contain').innerHTML=template('tpl', data);
    }
    data.tel=Getvariable('phone');
    renderhtml();
    pre_loading_txt(100);
    // }

    //防止 键盘弹出后 背景错位
    var h=window.innerHeight<500?500:window.innerHeight;
    document.getElementById('bgcontain').style.height=h+'px';

    //发送验证码
    var sendmaobj=document.getElementById('sendma');

    var sign = '';
    function sendmafun(){
        if(!canajax){
            return false;
        }

        if(sendmaobj.innerHTML=='发送验证码' || sendmaobj.innerHTML=='重新发送'){
            var phone=document.getElementsByName('phone')[0].value;
            var confirm_password=document.getElementsByName('confirm_password')[0].value;
            var password=document.getElementsByName('password')[0].value;
            if(phone==''){
                hui.toast('请输入手机号');
                return false;
            }
            if(!/^1[3|4|5|7|8]\d{9}$/.test(phone)){
                hui.toast('手机号不正确');
                return false;
            }

            if(password == ''){
                hui.toast('请输入密码');
                return false;
            }
            if(confirm_password == ''){
                hui.toast('请输入确认密码');
                return false;
            }
            if (password == null || password.length < 8) {
                hui.toast('密码长度不足8位');
                return false;
            }
            var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
            if (!reg.test(password)){
                hui.toast('密码必须包含数字和字母');
                return false;
            }
            if(password != confirm_password){
                hui.toast('两次密码不一致');
                return false;
            }

            //发送短信接口
            hui.post(
                'index.php?app=share&act=send_messages',
                {
                    mobile:phone,
                },
                function(res){
                    canajax=true;
                    res = JSON.parse(res);
                    if (res.code == 1) {
                        sign = res.result.msg_sign;
                        daojishi();
                    } else
                        hui.toast(res.message);
                    toLogin();
                },
                function(res){
                    canajax=true;
                    console.log('error');
                    console.log(res);
                }
            );
        }
    }
    var timer=null;
    var timezhi=60;
    var timecurr=timezhi;
    function daojishi(){
        console.log('enter')
        timecurr=timezhi;
        sendmaobj.innerHTML=timecurr+'s';

        timer=setInterval(function(){
            if(timecurr>1){
                timecurr--;
                sendmaobj.innerHTML=timecurr+'s';
            }else{
                clearInterval(timer);
                timer=null;
                sendmaobj.innerHTML='重新发送';
            }
        },1000);
    }

    //注册
    function submit(){
        if(!canajax){
            return false;
        }
        var phone=document.getElementsByName('phone')[0].value;
        var password=document.getElementsByName('password')[0].value;
        var confirm_password=document.getElementsByName('confirm_password')[0].value;
        var yzm=document.getElementsByName('yzm')[0].value;

        if(phone==''){
            hui.toast('请输入手机号');
            return false;
        }
        if(!/^1[3|4|5|7|8]\d{9}$/.test(phone)){
            hui.toast('手机号不正确');
            return false;
        }

        if(password == ''){
            hui.toast('请输入密码');
            return false;
        }
        if(confirm_password == ''){
            hui.toast('请输入确认密码');
            return false;
        }
        if (password == null || password.length < 8) {
            hui.toast('密码长度不足8位');
            return false;
        }
        var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
        if (!reg.test(password)){
            hui.toast('密码必须包含数字和字母');
            return false;
        }
        if(password != confirm_password){
            hui.toast('两次密码不一致');
            return false;
        }
        if(yzm==''){
            hui.toast('请输入短信验证码');
            return false;
        }

        canajax=false;
        var chuan={
            phone:phone,
            code:yzm,
            password:password,
            confirm_password:confirm_password,
            msg_sign:sign,
            city:city,
            token:Getvariable('token')
        };
        hui.post(
            'index.php?app=share&act=shareRegister',
            chuan,
            function(res){
                canajax=true;
                res = JSON.parse(res);
                if (res.code == 1) {
                    hui.toast('注册成功啦，请赶紧下载APP吧');
                } else if (res.code == -1) {
                    hui.toast(res.msg);
                }
            },
            function(res){
                canajax=true;
                console.log('error');
                console.log(res);
            }
        );
    }
</script>
</body>
</html>